<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>用户注册</title>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/base.css?{:time()}" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/reg.css?{:time()}" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/app.css?{:time()}" />
    <script type="text/javascript" src="__STATIC__/js/lottery.js"></script>
</head>
<style>

</style>

<body>
    <div class="main">
        <div class="logo" style="margin-top:1rem"></div>
        <form name="mainForm" id="mainForm">

            <div class="step step-getCode">
                <!-- <h3>用户注册</h3> -->
                <p class="border_bot">
                    <i class="icon icon-mobile"></i>
                    <input class="input" id="mobile" name="username" placeholder="请输入手机号码" />
                </p>
                <p class="border_bot">
                    <i class="icon icon-lock"></i>
                    <input class="input" id="code" name="code" placeholder="请输入验证码" />
                    <label id="getCode">获取验证码</label>
                </p>
                <a class="btn redbg disabled nextStep">下一步</a>
            </div>

            <div class="step step-setPassword">
                <!-- <h3>设置密码</h3> -->
                <p class="border_bot">
                    <input class="input" type="password" id="password" name="password" placeholder="请输入6~20位密码" />
                </p>
                <p class="border_bot">
                    <input class="input" type="password" id="repassword" name="repassword" placeholder="请再次输入密码" />
                </p>
                <a class="btn redbg beforeStep" style="margin-bottom:0">上一步</a>
                <a class="btn redbg confirm disabled" style="margin-top:.2rem">确认</a>
            </div>

            <div class="step step-res">
                <i class="icon icon-res"></i>
                <div class="result-text">恭喜您注册成功</div>
            </div>

            <input type="hidden" name="first_leader" value="{$incode}"/>
        </form>
        
    </div>
    <div class="mask"></div>
</body>

<script src="__STATIC__/js/jquery.min.js"></script>
<script src="__STATIC__/js/layer/layer.js"></script>
<script src="__STATIC__/js/base.js?v={:time()}"></script>
<script type="text/javascript">
    var downLoadUrl = "{$download}";
   
    var getCodeURI = "/api/user/send_sms_reg_code";
    // var getRegURI = "/api/user/reg";
    var getRegURI = "/mobile/app/reg";
    var mobile = $("#mobile");
    var code = $("#code");
    var nextStep = $(".nextStep");
    var beforeStep = $(".beforeStep");
    var confirm = $(".confirm");
    var getCode = $("#getCode");
    var password = $("#password");
    var repassword = $("#repassword");

    var getCodeIng = false;

    // 默认打开获取验证码
    showStep("step-getCode");

    getCode.on("click", function () {
        if (getCodeIng) return;
        var tel = mobile.val();
        if (!/^1[\d]{10}$/.test(tel)) {
            return layer.open({
                content: '请输入正确的手机号码',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
        }

        doAjax(getCodeURI, {
                mobile: tel,
            },
            function (res) {
                console.log(res);
                if (res.status == 1) {
                    new Countdown({
                        totalTime: 120,
                        setSec: true,
                        start_callback: function () {
                            getCodeIng = true;
                        },
                        callback: function (time) {
                            console.log(time)
                            getCode.html(time + "s后重新获取");
                        },
                        end_callback: function () {
                            getCodeIng = false;
                            getCode.html("获取验证码");
                        },
                    })
                } else {
                    if( /已注册/.test(res.msg) )
                    {
                        return downLoadApp();
                    }
                    return layer.open({
                        content: res.msg || '请稍候重试',
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                }
            }, {}, {}, {}, {}, {})
    })
    // 输入验证码 下一步可点击
    code.on("keyup",function(){
        if( $(this).val()!='' && /^1[\d]{10}$/.test(mobile.val()) )
        {
            nextStep.removeClass("disabled")
        }else{
            nextStep.addClass("disabled")
        }
    })
     // 上一步
    beforeStep.on("click", function () {
        console.log("disabled",$(this).hasClass("disabled"))
        if($(this).hasClass("disabled")) return;
        showStep("step-getCode");
    });
    // 下一步
    nextStep.on("click", function () {
        console.log("disabled",$(this).hasClass("disabled"))
        if($(this).hasClass("disabled")) return;
        showStep("step-setPassword");
    });
    // 输入密码
    password.on("keyup",function(){
        if( $(this).val()!='' && repassword.val()!='' )
        {
            confirm.removeClass("disabled")
        }else{
            confirm.addClass("disabled")
        }
    })
    // 输入密码
    repassword.on("keyup",function(){
        if( $(this).val()!='' && password.val()!='' )
        {
            confirm.removeClass("disabled")
        }else{
            confirm.addClass("disabled")
        }
    })
    // 提交注册
    confirm.on("click", function () 
    {
        if($(this).hasClass("disabled")) return;
        var tel = mobile.val();
        if (!/^1[\d]{10}$/.test(tel)) {
            return layer.open({
                content: '请输入正确的手机号码',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
        }
        if( code.val() == '' )
        {
            return layer.open({
                content: '请输入验证码',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
        }

        if( password.val() == '' )
        {
            return layer.open({
                content: '请输入密码',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
        }

        if( password.val().length < 6 )
        {
            return layer.open({
                content: '密码强度不足',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
        }

        if( password.val() !== repassword.val() )
        {
            return layer.open({
                content: '两次密码输入不一致',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
        }

        doAjax(getRegURI,$("#mainForm").serialize(),
            function (res) {
                console.log(res);
                if (res.status == 1) {
                    // 注册成功
                    showStep("step-res");
                    downLoadApp();
                } else if(res.status == -10010) {
                    // 已经注册过了
                    return new Toast({
                        title: "注册确认",
                        content: "该手机号已注册，换个手机号码注册？",
                        btn:[
                            {
                                type: 'ok',
                                title: '确定',
                                callback: function()
                                {
                                    mobile.val('');
                                    code.val('');
                                    showStep("step-getCode");
                                }
                            },
                            {
                                type: 'cancel',
                                title: '直接下载',
                                callback: function()
                                {

                                    downLoadApp();
                                }
                            }
                        ]
                    });
                    
                }else{
                    return layer.open({
                        content: res.msg || '请稍候重试',
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                }
            }, {}, {}, {}, {}, {})
    })

    $(".logo").on("click",function(){
        downLoadApp();
    });

    function downLoadApp()
    {
        if( isWeiXin() )
        {
            // 跳转一遍方便微信使用其他浏览器打开
            return location.href = "/mobile/app/index?dl=1";
            return $(".mask").show();
        }
        
        if( downLoadUrl == '' )
        {
            return layer.open({
                content: '当前应用平台暂未上架，敬请期待',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
        }
        location.href = downLoadUrl;
    }

    function isWeiXin(){
        //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
        var ua = window.navigator.userAgent.toLowerCase();
        //通过正则表达式匹配ua中是否含有MicroMessenger字符串
        if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
        }else{
        return false;
        }
    };

    // 展示步骤
    function showStep(step)
    {
        $(".step").hide();
        $("."+step).show();
    }
</script>

</html>